<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>完善当当购物车页面</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
</head>
<body>

<div class="content">
    <div class="logo">
        <img src="images/dd_logo.jpg"><span onclick="close_plan();">关闭</span>
    </div>
    <div class="cartList">
        <ul>
            <li>¥<input type="text" name="price" value="21.90"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(0);"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(0);"></li>
            <li id="price0">¥21.90</li>
            <li><p  onclick="collection();">移入收藏</p><p onclick="del();">删除</p></li>
        </ul>
        <ul>
            <li>¥<input type="text" name="price" value="24.00"></li>
            <li><input type="button" name="minus" value="-" onclick="minus(1);"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick="plus(1);"></li>
            <li id="price1">¥24.00</li>
            <li><p  onclick="collection();">移入收藏</p><p onclick="del();">删除</p></li>
        </ul>
		
        <ol>
            <li id="totalPrice" onclick="showType()">&nbsp;</li>
            <li><span onclick="accounts();">结 算</span></li>
        </ol>
    </div>
</div>
<!-- <script type="text/javascript" src="js/shopping.js"></script> -->
<script>
	function showType(){
		var d=document.getElementsByClassName("cartList")[0];
		let uls=d.childNodes;
		for(let i in uls){
			alert(uls[i].nodeName+":"+uls[i].nodeValue+",type="+uls[i].nodeType);
		}
	}
	function accounts(){
		var d=document.getElementsByClassName("cartList")[0];
		//!!!!!
		//document.getElementsByTagName("ul");//全部的ul
		//找d的下级
		//let uls=d.getElementsByTagName("ul");
		let uls=d.children;
		let str="您购买的商品信息如下:\n";
		//alert(uls.length);
		for(let i=0;i<uls.length-1;i++){
			let ul=uls[i];
			//alert(ul.innerHTML);
			str+=ul.children[2].innerHTML; 
			str+="\r\n";
		}
		str+="总计:";
		//alert(d.lastElementChild.getElementById("totalPrice"));
		//alert(d.lastElementChild.firstElementChild.innerHTML);
		str+=d.lastElementChild.firstElementChild.innerHTML;//d.lastElementChild.getElementById("totalPrice").innerHTML;
		
		alert(str);
	}
	function minus(i){
		var p=document.getElementsByName("price")[i].value;//价格
		var amout=document.getElementsByName("amount")[i].value;
		if(amout<=0)
			return; 
		amout--;
		document.getElementsByName("amount")[i].value=amout;
		
		var xiaoji=parseFloat(p)*parseFloat(amout);
		var li=document.getElementById("price"+i).innerHTML="¥"+xiaoji;
		
		totalCalc();
	}
	function plus(i){
		var p=document.getElementsByName("price")[i].value;//价格
		var amout=document.getElementsByName("amount")[i].value;
		
		amout++;
		document.getElementsByName("amount")[i].value=amout;
		
		var xiaoji=parseFloat(p)*parseFloat(amout);
		var li=document.getElementById("price"+i).innerHTML="¥"+xiaoji;
	
		totalCalc();
	}
	function totalCalc(){
		var p=document.getElementsByName("price");
		var ar=document.getElementsByName("amount");
		var total=0;
		for(let i=0;i<p.length;i++){
			total+=parseFloat(p[i].value)*parseFloat(ar[i].value);
		}
		document.getElementById("totalPrice").innerHTML="¥"+total;
	}
	totalCalc();
</script>
</body>
</html>